<!-- 用户管理 -->
<template>
    <div class="user">
        <div class="search-container">
            <div class="search-input">
                <el-input v-model="search" placeholder="用户名"></el-input>
                <el-button type="primary" @click="searchFn">筛选</el-button>
            </div>

            <div class="search-input">
                <el-button type="primary">批量删除</el-button>
                <el-button type="primary">添加</el-button>
            </div>
        </div>

        <template>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="ID" width="50">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="姓名" width="100">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="年龄" width="80">
                    <template slot-scope="scope">{{ scope.row.age }}</template>
                </el-table-column>
                <el-table-column label="专业" width="120">
                    <template slot-scope="scope">{{
                        scope.row.major
                    }}</template>
                </el-table-column>
                <el-table-column label="地址" width="200">
                    <template slot-scope="scope">{{
                        scope.row.address
                    }}</template>
                </el-table-column>
                <el-table-column label="缴费" width="80">
                    <template slot-scope="scope">{{ scope.row.pay }}</template>
                </el-table-column>
                <el-table-column label="毕业时间" width="100">
                    <template slot-scope="scope">{{
                        scope.row.graduateTime
                    }}</template>
                </el-table-column>
                <el-table-column width="200">
                    <template slot-scope="scope">
                        <el-button type="success" @click="editFn(scope.row)"
                            >编辑</el-button
                        >
                        <el-button type="warning" @click="delFn(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 定义修改数据模态框  点击编辑按钮后，出现 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <div class="content">
                <el-input v-model="editInfo.name" placeholder="姓名"></el-input>
                <el-input v-model="editInfo.age" placeholder="年龄"></el-input>
                <el-input
                    v-model="editInfo.major"
                    placeholder="专业"
                ></el-input>
                <el-input
                    v-model="editInfo.address"
                    placeholder="地址"
                ></el-input>
                <el-select v-model="editInfo.pay" placeholder="是否缴费">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
                <el-date-picker
                    v-model="editInfo.graduateTime"
                    type="date"
                    placeholder="毕业时间"
                >
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSure">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :pager-count="5"
            @current-change="currentchange"
            @prev-click="prev"
            @next-click="next"
        >
        </el-pagination>
    </div>
</template>

<script>
import { getStudentList, editUser, deleteUser } from "@/http/http";
export default {
    data() {
        return {
            tableData: [], // 表格数组
            page: 1, // 页数 第几页
            pageSize: 10, // 每页条数
            search: "", // 搜索值
            dialogVisible: false, // 是否显示模态框
            editInfo: {}, // 编辑用户信息
            total: 0, // 总数据条数  （分页器用的）
        };
    },
    methods: {
        // 点击筛选按钮
        searchFn() {
            // 根据搜索条件进行筛选
            this.getlist();
        },

        // 根据搜索条件进行筛选
        getlist() {
            // 获取学生列表数据
            getStudentList({
                searchVal: this.search,   // 搜索值：学生名称关键字
                page: this.page,    // 页数 第几页
                pageSize: this.pageSize,  // 每页条数
            }).then((res) => {
                // console.log(11, res);
                this.tableData = res.data; // 表格数组
                this.total = res.total;  // 总数据条数
            });
        },

        // 点击编辑按钮后
        editFn(item) {
            // console.log(item);
            //控制修改数据模态框出现
            this.dialogVisible = true;
            // 数据回填
            this.editInfo = item;
        },

        // 编辑确认按钮
        editSure() {
            // console.log(this.editInfo);
            // 将获取的日期格式转换成yyyy-mm-dd
            let graduateTime = new Date(this.editInfo.graduateTime);

            //Tue Jan 24 1984 00:00:00  (中国标准时间)
            console.log('graduateTime', graduateTime);

            let month =
                graduateTime.getMonth() + 1 < 10
                    ? "0" + (graduateTime.getMonth() + 1)
                    : graduateTime.getMonth() + 1;

            let year = graduateTime.getFullYear();

            let day =
                graduateTime.getDate() < 10
                    ? "0" + graduateTime.getDate()
                    : graduateTime.getDate();

            let selectDay = year + "-" + month + "-" + day;
            console.log('selectDay', selectDay);  //1984-01-24

            this.editInfo.graduateTime = selectDay;

            //发送请求 调用编辑用户接口，
            editUser(this.editInfo).then((res) => {
                if (res.code == 200) {
                    // 隐藏模态框
                    this.dialogVisible = false;
                    // 修改成功提示
                    this.$message({
                        message: "修改成功",
                        type: "success",
                        duration: 2000,
                    });
                    // 重新调用列表接口
                    this.getlist();
                }
            });
        },

        // 删除按钮
        delFn(item) {
            console.log(item);
            // 发送请求，删除数据
            deleteUser({ id: item.id }).then((res) => {
                if (res.code == 200) {
                    // 修改成功提示
                    this.$message({
                        message: "修改成功",
                        type: "success",
                        duration: 2000,
                    });
                    // 重新调用学生列表
                    this.getlist();
                }
            });
        },

        // 点击页码时触发
        currentchange(val) {
            console.log('currentchange', val);  //2
            this.page = val;
            // 重新调用学生列表
            this.getlist();
        },

        // 点击上一页触发
        prev(val) {
            console.log('prev', val);   //1
            this.page = val;
            // 重新调用学生列表
            this.getlist();
        },

        // 点击下一页触发
        next(val) {
            console.log(val);  //2
            this.page = val;
            // 重新调用学生列表
            this.getlist();
        },
    },

    created() {
        // 初始化调用
        this.getlist();
    },
};
</script>
<style scoped lang='less'>
.user {
    overflow: auto;
}
/* @import url(); 引入css类 */
.search-container {
    height: 66px;
    margin: 0 0 20px;
    padding: 0px 18px 0px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .search-input {
        display: flex;
        align-items: center;
    }
    /deep/.el-input__inner {
        width: 163px;
        height: 30px;
        margin-right: 15px;
    }
}
.content .el-input {
    margin: 5px 0;
}
</style>